<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/1/8
  Time: 9:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <style>
        #book{
            width: 100%;
            height: 320px;
        }
    </style>
</head>
<body>
<%--搜索模块--%>
<div class="layui-form-item" style="padding: 10px">
    <form class="layui-form" id="sss" >
        <%--<div class="layui-form-item">
            <label class="layui-form-label">起始时间</label>
            <div class="layui-input-inline">
                <input type="date" id="onTime" name="onTime" placeholder="请输入起始时间"  class="layui-input">
            </div>
            <label class="layui-form-label">截止时间</label>
            <div class="layui-input-inline">
                <input type="date" id="offTime" name="offTime" placeholder="请输入截止时间"  class="layui-input">
            </div>
            <button type="button" class="layui-btn " onclick="tongji()" lay-filter="ssbtu">搜索</button>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
        </div>--%>
        <div class="layui-inline">
            <label class="layui-form-label">年月范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test" placeholder="请选择范围">
            </div>
            <button type="button" class="layui-btn " onclick="tongji()" lay-filter="ssbtu">搜索</button>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
        </div>
    </form>
</div>
<div id="book"></div>
<script>
    $(function (){
        tongji();
    })

    function tongji(){
        var rukudate = []
        var rukumoney=[]
        $.ajax({
            url: '${pageContext.request.contextPath}/tongji/ruku',
            type: 'post',
            async: false,
            //data:{onTime:document.getElementById("onTime").value,offTime:document.getElementById("offTime").value},
            data:{time:document.getElementById("test").value},
            dataType: 'json',
            success: function (data) {
                var k=0;
                if (document.getElementById("test").value!=null&&document.getElementById("test").value!=""){
                    var h = document.getElementById("test").value;
                    if (Number(h.substring(0,4))<Number(data[0].year)){
                        k=1
                    }else {
                        k = Number(h.substring(5,7));
                    }
                }else {
                    k=1;
                }
                for (let i = 0; i < data.length; i++) {
                    for (let j = k; j <= 13; j++) {
                        if(j==13){
                            k=1;
                            j=1;
                        }
                        if(j==data[i].month){
                            rukudate.push(data[i].year+"年"+data[i].month+"月");
                            rukumoney.push(data[i].price);
                            k=j+1;
                            break;
                        }else {
                            rukudate.push(data[i].year+"年"+j+"月");
                            rukumoney.push(0);
                        }
                    }
                }
            }
        })
        var chukudate = []
        var chukumoney=[]
        $.ajax({
            url: '${pageContext.request.contextPath}/tongji/chuku',
            type: 'post',
            async: false,
            //data:{onTime:document.getElementById("onTime").value,offTime:document.getElementById("offTime").value},
            data:{time:document.getElementById("test").value},
            dataType: 'json',
            success: function (data) {
                var k=0;
                if (document.getElementById("test").value!=null&&document.getElementById("test").value!=""){
                    var h = document.getElementById("test").value;
                    if (Number(h.substring(0,4))<Number(data[0].year)){
                        k=1
                    }else {
                        k = Number(h.substring(5,7));
                    }
                }else {
                    k=1;
                }
                for (let i = 0; i < data.length; i++) {
                    for (let j = k; j <= 13; j++) {
                        if(j==13){
                            k=1;
                            j=1;
                        }
                        if(j==data[i].month){
                            chukudate.push(data[i].year+"年"+data[i].month+"月");
                            chukumoney.push(data[i].price);
                            k=j+1;
                            break;
                        }else {
                            chukudate.push(data[i].year+"年"+j+"月");
                            chukumoney.push(0);
                        }
                    }
                }
            }
        })
        var dddate = []
        var ddmoney=[]
        $.ajax({
            url: '${pageContext.request.contextPath}/tongji/dd',
            type: 'post',
            async: false,
            //data:{onTime:document.getElementById("onTime").value,offTime:document.getElementById("offTime").value},
            data:{time:document.getElementById("test").value},
            dataType: 'json',
            success: function (data) {
                var k=0;
                if (document.getElementById("test").value!=null&&document.getElementById("test").value!=""){
                    var h = document.getElementById("test").value;
                    if (Number(h.substring(0,4))<Number(data[0].year)){
                        k=1
                    }else {
                        k = Number(h.substring(5,7));
                    }
                }else {
                    k=1;
                }
                for (let i = 0; i < data.length; i++) {
                    for (let j = k; j <= 13; j++) {
                        if(j==13){
                            k=1;
                            j=1;
                        }
                        if(j==data[i].month){
                            dddate.push(data[i].year+"年"+data[i].month+"月");
                            ddmoney.push(data[i].price);
                            k=j+1;
                            break;
                        }else {
                            dddate.push(data[i].year+"年"+j+"月");
                            ddmoney.push(0);
                        }
                    }
                }
            }
        })
        var tongjidate = [];
        if (chukudate.length>rukudate.length){
            if (dddate.length>chukudate.length){
                tongjidate = dddate;
            }else {
                tongjidate = chukudate;
            }
        }else {
            if (dddate.length>rukudate.length){
                tongjidate = dddate;
            }else {
                tongjidate = rukudate;
            }
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('book'));
        option = {
            title: {
                text: '出入库金额'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['入库金额', '出库金额','订单金额']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: tongjidate
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '入库金额',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: rukumoney
                },
                {
                    name: '出库金额',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: chukumoney
                },
                {
                    name: '订单金额',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: ddmoney
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test'
            ,type: 'month'
            ,range: true //或 range: '~' 来自定义分割字符
        });
    })
</script>
</body>
</html>